<script lang="ts">
	import type { CardInfo } from '$lib/api/proto/resource_card_api';
	import SimpleEditor from '$lib/components/editor/SimpleEditor.svelte';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';

	interface Props {
		resourceId: string;
		cardId: string;
		onClose: () => void;
	}
	const props: Props = $props();

	let cardInfo = $state(null as CardInfo | null);

	async function loadCardInfo() {
		if (userStore.userSession == null) {
			return;
		}
		const res = await callApi(
			appStore.resourceCardApiClient.get({
				sessionId: userStore.userSession,
				resourceId: props.resourceId,
				cardId: props.cardId
			}).response
		);
		if (res.card != undefined) {
			cardInfo = res.card;
		}
	}

	loadCardInfo();
</script>

<dialog class="modal modal-open">
	<div class="modal-box flex-col space-y-4 w-[800px] max-w-none">
		<button
			class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
			onclick={() => props.onClose()}>✕</button
		>
		<h3 class="text-lg font-bold">{cardInfo?.basicInfo?.title}</h3>
		<SimpleEditor
			sizeClass="min-h-[300px] border-2 border-base-200 max-h-[300px]"
			data={cardInfo?.basicInfo?.content}
			readOnly
		/>
	</div>
	<div class="modal-backdrop">
		<button onclick={() => props.onClose()}>close</button>
	</div>
</dialog>
